$.fn.commentImg = function(options){
    var defaults = {
        activeClass: 'current',
        nextButton: '.next',
        prevButton: '.prev',
        imgNavBox:'.photos-thumb',
        imgViewBox:'.photo-viewer'
    };
    var opts = $.extend({},defaults, options);
    this.each(function(){
        var _this =$(this),
            imgNav =_this.find(opts.imgNavBox).children(),
            imgViewBox =_this.find(opts.imgViewBox),
            prevBtn = _this.find(opts.prevButton),
            nextBtn = _this.find(opts.nextButton),
            src = '',
            img = new Image();
        function youtuBe(src){
            var player = videojs('vid1',{
                techOrder:["youtube"],
                sources: [{
                    type: "video/youtube",
                    src: src
                }],
                youtube: {playlist: "2_HXUhShhmY,lLJf9qJHR3E"},
                loop:true,//循环播放
                autoplay:false,//自动播放
                playsinline: 1,//禁止在IOS app 上自动全屏
                muted: false
            }, function onPlayerReady() {
                this.play();
            });
        }
        function setViewImg(viewSrc, width, height){
            // var url=viewSrc.indexOf('youtu');
            var width = $('.tm-m-photos')[0].clientWidth
            if(viewSrc.indexOf('youtu')>0){
                imgViewBox.attr('data-type','video')
                imgViewBox.show(0,function(){
                    youtuBe(viewSrc)
                    // $(this).css({ "width": '358px', "height": '358px' }).find("video").show();
                    $('#vid1').css({ "width": "100%", "height": "100%" }).show()
                    $(this).css({ "width": width, "height": width }).find("img").hide();
                });
            }else{
                imgViewBox.attr('data-type','img')
                img.src = viewSrc;
                img.onload = function () {
                    var imageWidth = img.width;
                    var imageHeight = img.height;
                    imgViewBox.show(0,function(){
                        $(this).css({ "width": width, "height": width }).find("img").show().attr('src', src);
                        $('#vid1').hide()
                    });
                }
            }
        }
        $(window).resize(function () {
            //当浏览器大小变化时
            var width = $('.tm-m-photos')[0].clientWidth
            $('.tm-m-photo-viewer').css({ "width": width, "height": width })
            $('#vid1').css({ "width": width, "height": width })
            $('.tm-m-photo-viewer').find(img).css({ "width": width, "height": width })
        });
        imgNav.on("click",function(){
            if ($(this).hasClass(opts.activeClass)){
            } else {
                $(this).toggleClass(opts.activeClass).siblings().removeClass(opts.activeClass);
                var left = parseInt($(this).parent().css('left'))
                var index = $(this).index()
                if (index == 0) {
                    $('.tm-m-photos-thumb').css('left','29px')
                } else {
                    $('.tm-m-photos-thumb').css('left',(29 - index*60) + 'px')
                }
                if($(this).hasClass(opts.activeClass)){
                    src = $(this).attr('data-src');
                    var width = $(this).attr('data-width');
                    var height = $(this).attr('data-height')
                    setViewImg(src, width, height);
                }else{
                    // imgViewBox.css({ "width": 0, "height": 0 }).hide();
                }
            }
        });
        // 图片放大
        imgViewBox.on("click",function(){
            var type = $(this).attr('data-type')
            if (type == 'img') {
                var imgSrc = $(this).find('img').attr('src')
                window.scrollTo(0,0);
                $('body').css('overflow','hidden')
                imgChange(imgSrc)
            }
        });
        function imgChange(imgSrc){
            var img = new Image()
            img.src = imgSrc
            $('#img').attr('src', imgSrc)
            $('.pictureBox').fadeIn()
        }
        // 关闭
        $('.pictureBox>.box2>.close').click(function () {
            $('.pictureBox').hide()
            $('body').css('overflowY','auto')
        })
        $('.pictureBox>.box2>.next').click(function(){
            var index = $('.tm-m-photos-thumb').find('.tm-current').index()
            var length = $('.tm-m-photos-thumb li').length
            var nextType = $('.tm-m-photos-thumb').find('li').eq(index+1).attr('data-type')
            if (nextType == 'img') {
                var imgSrc = $('.tm-m-photos-thumb').find('li').find('img').eq(index+1).attr('src').replace('_s','')
                $('.right').click()
                imgChange(imgSrc)
            } else {
                var imgSrc = $('.tm-m-photos-thumb').find('li').find('img').eq(0).attr('src').replace('_s','')
                $('.tm-m-photos-thumb').find('li').eq(0).click()
                imgChange(imgSrc)
            }
        })
        $('.pictureBox>.box2>.prev').click(function(){
            var index = $('.tm-m-photos-thumb').find('.tm-current').index()
            var length = $('.tm-m-photos-thumb li').length
            var nextType = $('.tm-m-photos-thumb').find('li').eq(index-1).attr('data-type')
            if (nextType == 'img') {
                var imgSrc = $('.tm-m-photos-thumb').find('li').find('img').eq(index-1).attr('src').replace('_s','')
                if (index == 0) {
                    $('.tm-m-photos-thumb').find('li').eq(length - 1).click()
                }else{
                    $('.left').click()
                }
                imgChange(imgSrc)
            }else{
                var imgSrc = $('.tm-m-photos-thumb').find('li').find('img').eq(length - 2).attr('src').replace('_s','')
                $('.tm-m-photos-thumb').find('li').eq(length - 2).click()
                imgChange(imgSrc)
            }
        })

        prevBtn.hover(function () {
            var index = imgNav.index(_this.find(opts.imgNavBox).children("." + opts.activeClass));
            if (index < 1) {
                $(this).css({"cursor":"default"}).children().hide();
            } else {
                $(this).css({"cursor":"pointer"}).children().show();
            }
        }, function () {
            $(this).css({"cursor":"default"}).children().hide();
        });

        nextBtn.hover(function () {
            var index = imgNav.index(_this.find(opts.imgNavBox).children("." + opts.activeClass));
            if (index >= imgNav.length - 1) {
                $(this).css({"cursor":"default"}).children().hide();
            } else {
                $(this).css({"cursor":"pointer"}).children().show();
            }
        }, function () {
            $(this).css({"cursor":"default"}).children().hide();
        });

        $('.left').on("click",function (e) {
            e.stopPropagation();
            var index = imgNav.index(_this.find(opts.imgNavBox).children("." + opts.activeClass));
            if (index > 0) {
                index--;
                imgNav.eq(index).toggleClass(opts.activeClass).siblings().removeClass(opts.activeClass);
                src = imgNav.eq(index).attr('data-src');
                var width = imgNav.eq(index).attr('data-width');
                var height = imgNav.eq(index).attr('data-height')
                setViewImg(src, width, height);
            }
            if (index <= 0) {
                $(this).css({"cursor":"default"}).children().hide();
            }
            var index = $('.tm-m-photos-thumb').find('.tm-current').index()
            if (index == 0) {
                $('.tm-m-photos-thumb').css('left','29px')
            } else {
                $('.tm-m-photos-thumb').css('left',(29 - index*60) + 'px')
            }
        });

        $('.right').on("click",function (e) {
            e.stopPropagation();
            var index = imgNav.index(_this.find(opts.imgNavBox).children("." + opts.activeClass));
            if (index < imgNav.length - 1) {
                index++;
                imgNav.eq(index).toggleClass(opts.activeClass).siblings().removeClass(opts.activeClass);
                src = imgNav.eq(index).attr('data-src');
                var width = imgNav.eq(index).attr('data-width');
                var height = imgNav.eq(index).attr('data-height')
                setViewImg(src, width, height);
            }
            if (index >= imgNav.length - 1) {
                $(this).css({"cursor":"default"}).children().hide();
            }
            var index = $('.tm-m-photos-thumb').find('.tm-current').index()
            if (index == 0) {
                $('.tm-m-photos-thumb').css('left','29px')
            } else {
                $('.tm-m-photos-thumb').css('left',(29 - index*60) + 'px')
            }
        });
        $('.box1').on("click",function (e) {
            $('.pictureBox').hide()
            $('body').css('overflowY','auto')
        })
        // var timer = {
        //     t:"",
        //     isStart:false,
        //     startmove:function(){
        //         if (!this.isStart) {
        //             this.isStart = true
        //         }
        //         this.t = setInterval(function(){
        //             var index = $('.tm-m-photos-thumb').find('.tm-current').index()
        //             var last = $('.tm-m-photos-thumb').find('li').last().index()
        //             if (index < last) {
        //                 $('.right').click()
        //             } else if(index == last){
        //                 $('.tm-m-photos-thumb').find('li').eq(0).click()
        //             }
        //         },2000)
        //     },
        //     stopmove:function(){
        //         if (this.isStart) {
        //             this.isStart = false
        //             clearInterval(this.t)
        //         }
        //     }
        // }
        // timer.startmove()
        // $('.panel').mouseover(function(){
        //     timer.stopmove()
        // })
        // $('.panel').mouseout(function(){
        //     timer.startmove()
        // })
    })
}